<template>
  <div>
    <van-nav-bar
      title="我的任务"
      left-arrow
      @click-left="onClickLeft"/>
    <div id="contentBody" class="contentBody">
      <div id="contentView">
        <div id="resultList">
          <van-list>
            <van-cell v-for="cminfo in dataList" :key="cminfo.FLOWNO"
                      :id="cminfo.FLOWNO" @click="showDetailInfo">
              <div>
                <table>
                  <tr>
                    <td class="leftside wordcs">{{cminfo.PAYACCNO | account}}</td>
                    <td class="rightside wordcs">{{title}}</td>
                  </tr>
                  <tr class="line">
                    <td colspan="2" class="line"></td>
                  </tr>
                  <tr>
                    <td class="wordcs comName">{{companyName}}</td>
                    <td class="rightside status"><div>{{cminfo.RESULTSTATUS | applyType}}</div></td>
                  </tr>
                  <tr>
                    <td class="amt">{{cminfo.TRANAMT | currency }}</td>
                    <td class="rightside">{{cminfo.APPLYTIME | dateFormat}}</td>
                  </tr>
                </table>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  Tabs,
  List,
  Cell,
  Tag,
  NavBar
} from 'vant';
import { queryAuthTransfer } from '@/libs/api';
import { mapActions } from 'vuex';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      title: '',
      companyName: '',
      backIcon: require('../../assets/tabbar/home_se@2x.png'),
      activeName: 'apply',
      dataList: [],
      loading: false,
      finished: true,
      qryParam: {},
      busInfo: {},
      pageNum: 10,
      pageIndex: 1
    };
  },
  methods: {
    ...mapActions(['changeToRouter']),
    onItemClick(name, title) {
      console.log(name, title);
      this.searchDataList();
    },
    showDetailInfo(obj) {
      console.log(obj.currentTarget.id);
      this.$router.push({ name: 'jobInfo', params: { FLOWNO: obj.currentTarget.id, busCode: this.busInfo.bsncode, apply: true } });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getJobInfo() {
      this.qryParam.cstNo = this.$store.state.loginUser.cichno;
      this.qryParam.hostNo = this.$store.state.loginUser.cino;
      this.qryParam.operNo = this.$store.state.loginUser.userId;
      this.qryParam.serviceName = 'Transfer_Q_readyAuthTransfer';
      this.qryParam.bsnCode = this.$store.state.routeData.params.bsncode;
      this.qryParam.pageIndex = this.pageIndex;
      this.qryParam.pageNum = this.pageNum;
      queryAuthTransfer(this, this.qryParam).then((res) => {
        console.log(res);
        if (res.retCode === 'CIP0000000') {
          this.dataList = res.readyAuthList;
        }
      });
    }
  },
  mounted() {
    // this.getJobInfo();
  },
  created() {
    this.title = this.$store.state.pageTitle;
    this.companyName = this.$store.state.loginUser.companyName;
    this.busInfo = this.$route.params;
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getJobInfo();
    });
  }
};
</script>

<style scoped>
  .contentBody{
    height: calc(100vh - 46PX);
    background-color: #f3f6f9;
    overflow-y:scroll;
  }
  .contentBody table {
    width: 100%;
  }
  .leftside{
    width: 70%;
  }
  .rightside{
    text-align: right;
  }
  .van-cell{
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .wordcs{
    color: #333333;
    font-size: 11pt;
  }
  .comName{
    font-weight: bold;
    height: 100px;
  }
  .amt{
    color: #188DC1;
    font-size: 15pt;
  }
  .line{
    height: 100px;
    background-color: #f3f6f9;
    height: 1px;
    width: 100%;
  }
  .status{
    color: #FF6905;
    font-size: 9pt;
  }
  .status div{
    background-color: #FFF0E6;
    width: 95px;
    text-align: center;
    float: right;
  }
  .van-dropdown-menu__item{
    background-color: #F3F6F9;
  }
  .van-icon{
    color: black;
  }

</style>
